<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>广告计划查询</title>
   <!-- META SECTION -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       
       <link rel="icon" href="favicon.ico" type="image/x-icon" />
       <!-- END META SECTION -->
       
       <!-- CSS INCLUDE -->        
       <link rel="stylesheet" href="${ctx}/rs/css/bootstrap-table.css" />
       <link rel="stylesheet" href="${ctx}/rs/css/main.css" />
       <link id="theme" rel="stylesheet" href="${ctx}/rs/joli/css/theme-default.css" />
       <!-- EOF CSS INCLUDE -->                                    
    <style type="text/css">
    #content {padding: 10px;}
      ol,li{list-style: none}
    table.table { font-size: 12px; }
    table.table .s-th{text-align: center;}
    table.table>thead { color:#0A6EC7; }
    #pagination1 { text-align: right;}
    #pagination1>ul { margin: 0;}
    .cus-stdButton {
        margin-top: 7px;margin-bottom: 7px;
        min-width: 120px;
    }
    .cus-redFont { color: #f00;}
    .minBtnWidth {min-width: 80px;}
    .cus-selectBox { display: inline-block;margin-right: 50px;}
    .cus-select { margin-left: 1em;}
    .cus-searchBtn { width: 120px;margin-left: 1em;}
    .cus-stdPaddingBox { padding-bottom: 7px;padding-top: 7px;}
    .cus-stdPaddingBox input { margin-left: 15px;margin-right: 15px;}
    div.cus-player { height: 160px; padding: 20px;}
    div.cus-player>div:first-child {

    }
    button.close-confirm{font-size: 14px;color: #222;margin-top: 6px; color: #5E5E5E;background-color: #fff;border-color: #ccc; font-weight: normal; width: 68px;line-height: 1;float: right;}
    
    div.cus-player>div:last-child {
        width: 430px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #F4F2F2;
        box-shadow: 1px 1px 0px #C7C7C7;
        border-radius: 8px;
        padding:0 10px; 
        position: relative;
    }
    div.cus-player>div:last-child>div:first-child {
        width: 30px;
        font-size: 16px;
        color: #F95A94;
        float: left;
    }
    div.cus-player>div:last-child>div.process {
        width: 290px;
        height: 4px;
        line-height: 0;
        font-size: 0;
        background-color: #DEDCDC;
        margin-top:12px; 
        margin-left: 30px;
    }
    div.cus-player>div:last-child>div.process>div {
        height: 4px;
        width: 1px;
        max-width: 100%;
        line-height: 0;
        font-size: 0;
        background-color: #14D3EB;
    }
    div.cus-player>div:last-child>div:last-child {
        position: absolute;
        right: 10px;top:0;
    }
    body { background: #eee; }
    .cus-plan { 
        border: 1px solid #ccc; 
        overflow: hidden; 
        padding: 10px 0;
        margin: 0 10px 10px;
        background: #fff;
    }
    .cus-spe-plan {margin-bottom: 0;}
    .l-tar { text-align: right; }
    .l-tac { text-align: center; }
    .cus-plan span { }
    .adStatusBtn {padding-top: 10px;padding-bottom: 20px;}
    .adStatusBtn button { margin-left: 20px; margin-right: 20px; }
    .adStatusBtn button.current { color: #ff615f;font-weight: bold; }
    
    [v-cloak] { display: none; }
    div.modal-dialog { width: 380px; }
    div.modal-dialog-fail { width: 680px; }
    .reject-media span{display: inline-block;width: 260px;overflow: hidden;}
    /*-----Calendar-----*/
    #app5 { max-height: 450px;overflow-x:hidden;overflow-y: auto;  }
    .cus-calendar {margin-top: 30px;}
    .cus-calendar-title { 
        border-bottom: 1px solid #bbb;
        padding-bottom:5px; 
    }
    .cus-calendar ul {
        overflow: hidden;
        margin:0;padding:0; 
    }
    .cus-calendar li {
        list-style-type: none;
        display: inline-block;
        width: 14.2%;
        text-align: center;
        color: #000;
        float: left;
        margin-top: 10px;
    }
    .cus-calendar li i {
        font-style: normal;
        width: 26px;height: 26px;line-height: 26px;
        vertical-align: middle;
        display: inline-block;
    }
    .cus-calendar li i.checked {
        background-color: #ff615f;
        color: #fff;
        border-radius: 50%;
    }
    .cus-calendar li i.disabled { color: #aaa; }
    /*-----Calendar-----*/

    /*---------m-checkTimes--------*/
    table.m-checkTimes thead{border-bottom: 1px solid #cccccc;}
	table.m-checkTimes ul>li {
		cursor: pointer;
        border-bottom:1px solid #ccc;
        line-height: 24px;
	}
	table.m-checkTimes ul>li.current {
		color: #F00;			
	}

	table.m-checkTimes tbody ul,table.m-checkTimes tbody ol{max-height:250px;overflow-y:auto;}
    table.m-checkTimes ol>li {
        line-height: 24px;
    }
	table.m-checkTimes ol {
		display: none;
        padding-left: 0px;
	}
	.table.m-checkTimes ol.current {
		display:block;
	}
	.bg01{background:#dadada}
	/*-----------end-------------*/
    </style>
    <style type="text/css">
      #datePiker { width: 300px; }
      table.p-datePiker {
        width: 100%;
        border-collapse: collapse;
        
        text-align: center;
        font-family: 'Microsoft YaHei';
      }
      table.p-datePiker>thead {
        background-color: #141213;
        border: 1px solid #141213;
        color: #FFF;      
      }
      table.p-datePiker>thead>tr:first-child {
        background-color: #5E5E5E;
      }
      table.p-datePiker>tbody {
        border: 1px solid #CCC;
      }
      table.p-datePiker td,table.p-datePiker th {
        height: 30px;
        font-weight: normal;
      }
      table.p-datePiker td.selected {
        background-color: #34BF6C;
        color: #FFF;
        cursor: pointer;
      }
      table.p-datePiker th.dpMonth { text-align: center; }
      table.p-datePiker th.dpBtn { cursor: pointer; font-size: 18px; }
      table.p-datePiker th.dpBtn:hover { text-shadow: 2px 2px 1px #333; }
      table.p-datePiker th.dpBtn:active { background-color:#393939; }
      table.p-datePiker td.selectable {
        cursor: pointer;
      }
      table.p-datePiker td.disabled {
        color: #CCC;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="${ctx}/rs/css/custheme.css" />
</head>
<body>
<input type="hidden" id="userid" value="${userid}">
<input type="hidden" id="accountname" value="${accountname}">
<input type="hidden" id="ctx" value="${ctx}">
<!-- START PAGE CONTAINER -->
        <div class="page-container">
<!-- 引入左菜单部分 -->
<jsp:include page="../joli/menu.jsp"></jsp:include>

<!-- START PAGE CONTENT -->
<div class="page-content">
    
    <jsp:include page="../joli/top.jsp"></jsp:include>

<!-- START BREADCRUMB -->
<ul class="breadcrumb">
    <li><a href="#">FM广告管理</a></li>                    
    <li class="active">广告接单</li>
</ul>
<!-- END BREADCRUMB -->   


<!-- PAGE CONTENT WRAPPER -->
<div class="page-content-wrap">
	<div class="row">
		<div class="container-fluid">
		  <div class="row">
		    <div class="col-xs-12">
		          <div class="container-fluid">
		              <div class="row">
		                    <div class="panel panel-white panel-cus f-mt10">
		                            <div class="panel-body">
		                                <dl class="m-cus-select">
		                                    <dt class="l-left">投放状态</dt>
		                                    <dd class="l-right adStatusBtn"><span class="u-item current" value="10">全部</span><span class="u-item" value="0">新建待审</span><span class="u-item" value="2">审核通过</span><span class="u-item" value="1">审核不通过</span><span class="u-item" value="13">待投放</span><span class="u-item" value="14">投放中</span><span class="u-item" value="3">待确认投放</span><span class="u-item" value="7">交易成功</span></dd>
		                                </dl>
		                            </div>
		                    </div>                    
		            </div>
		               </div>
		      </div>
		  </div>
		  <div id="app" class="row" v-cloak>
		        <div class="cus-plan l-tac" v-if="datas.length==0">暂无数据</div>
		        <div class="cus-plan" v-for="item of datas">
		            <div class="col-xs-4"><span>广告计划名称：</span>{{ item.adPlanName }}</div>
		            <div class="col-xs-4"><span>广告主：</span>{{ item.company }}</div>
		            <div class="col-xs-4"><span>投放媒体数：</span>{{ item.resource_num }}</div>
		            <div class="col-xs-4"><span>计划提交日期：</span>{{ item.submit_time }}</div>
		            <!-- <div class="col-xs-4"><span>广告行业：</span>{{ item.industry }}</div> -->
		            <div class="col-xs-4"><span>广告总价：</span>{{ item.sum }} 元</div>
		            <div class="col-xs-4"><span>大计划状态：</span>{{ Status[item.status] }}</div>
		            <div class="col-xs-12"><hr /></div>
		            <div class="col-xs-12">
		            <table class="table table-striped table-hover table-cus">
		                <thead>
		                    <tr>
		                        <th>投放媒体</th>
		                        <th class="s-th" width="180">广告报价</th>
		                        <th class="s-th" width="100">播出日期</th>
		                        <th class="s-th" width="100">播出频次</th>
		                        <th class="s-th" width="100">广告时长（s）</th>
		                        <th class="s-th" width="120">广告总价（元）</th>
		                        <th class="s-th" width="100">状态</th>
		                        <th class="s-th">操作</th>
		                    </tr>
		                </thead>
		                <tbody>
		                <tr v-for="it of item.datas">
		                    <td class="text-left"><img width="30px" height="30px" :src="it.media_img">{{ it.media_name }}</td>
		                    <td>{{ it.timelevel_name }};{{ it.bid_price }} 元/次</td>
		                    <td><img src="${ctx}/rs/images/date.png" width="19" height="20" @click="selectDate(it)" /></td>
		                    <td>{{ it.post_times }}</td>
		                    <td>{{ it.duration }}</td>
		                    <td>{{ it.plan_counts }}</td>
		                    <td>{{ status[it.status] }}</td>
		                    <td>
		                    <button type="button" v-show="item.status>1 && (it.status==2 || it.status==13 || it.status==14)" class="btn btn-xs btn-link btn-link-cus" @click="showTime(it)"  data-toggle="modal"  data-target="#myModal6">上传播出点位</button>
		                    <button type="button"  v-show="it.status>2" class="btn btn-xs btn-link btn-link-cus" @click="checkTimes(it)" data-toggle="modal" data-target="#myModal7">查看播出点位</button>
		                    <a :href="it.prove" v-show="it.show_prove && it.status>2 " class="btn btn-xs btn-link btn-link-cus">查看播出证明</a>
		                    <button type="button" v-show="it.status==14" @click="done(it)" data-toggle="modal" data-target="#myModal2" class="btn btn-xs btn-link btn-link-cus">已投</button>
		                    </td>
		                </tr>          
		                </tbody>
		            </table>            
		            </div>
		            <div class="col-xs-12 l-tar f-mt10">
		                <a class="btn btn-cus-size-a btn-cus-white" :href="item.videoDownload" role="button">下载音频</a>                
		                <button v-show="item.status===1" type="button" @click="reson($index)" class="btn btn-cus-size-b btn-cus-white" data-toggle="modal" data-target="#myModal4">竞投失败原由</button>
		                <button v-show="item.status===1 || item.status===7" type="button" @click="dele($index)" class="btn btn-cus-size-a btn-cus-red">删除</button>
		                <button type="button" @click="listen($index)" class="btn btn-cus-size-a btn-cus-white" data-toggle="modal" data-target="#myModal">预听</button>
		                <button v-show="item.status===0" type="button" @click="pass($index)" class="btn btn-cus-size-a btn-cus-red">通过</button>
		                <button v-show="item.status===0" type="button" @click="reject($index)" class="btn btn-cus-size-a btn-cus-white" data-toggle="modal" data-target="#myModal3">不通过</button>
		                
		                <!-- <button type="button" @click="doneAll(item)" class="btn btn-cus-size-a btn-cus-red">已投</button> -->                
		            </div>
		        </div>       
		    </div>
		    <div class="row">
		        <div class="col-xs-4" id="pagination"></div>
		        <div class="col-xs-8" id="pagination1"><ul class="pagination"></ul></div>
		    </div>
		</div>
		<div class="modal fade" id="myModal" role="dialog" aria-labelledby="gridSystemModalLabel" data-desc="edit" data-backdrop="static">
		  <div class="modal-dialog modal-cus-dialog" role="document" style="width:530px;">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span id="modalCloseBtn" aria-hidden="true">&times;</span></button>
		        <span class="modal-title">预听</span>
		      </div>
		      <div class="modal-body">
		        <div class="container-fluid">
		          <div class="row">
		            <div class="col-xs-12">
		                <div class="cus-player">
		                    <div id="playerTitle" style="visibility: hidden;">title</div>
		                    <div>
		                      <div><span id="playerBtn" class="glyphicon glyphicon-play"></span></div>
		                      <div class="process"><div id="processBar"></div></div>
		                      <div id="playerTime">00:00/00:00</div>
		                    </div>                    
		                </div>
		            </div>
		          </div>
		        </div>
		      </div>
		    </div>
		  </div>
		</div>
		<div class="modal fade" id="myModal2" role="dialog" aria-labelledby="gridSystemModalLabel" data-desc="edit" data-backdrop="static">
		  <div class="modal-dialog modal-cus-dialog" role="document">
		    <div class="modal-content" id="app2">
		      <div class="modal-header">
		        <button type="button" class="close text-white" id="uploadFileClose" @click="closeModal"><span aria-hidden="true">&times;</span></button>
		        <span class="modal-title">已投</span>
		      </div>
		      <div class="modal-body">
		        <div class="container-fluid">
		          <div class="row">
		            <form class="form form-horizontal form-cus">
		                <div class="form-group f-mb10">
		                    <label class="col-cus-100 control-label control-cus-label"><span class="cus-redFont">*</span>播出证明：</label>
		                    <div class="col-cus-auto">
		                        <input type="hidden" v-model="img" />
		                        <input type="file" id="imgFile" class="form-control form-cus-control f-mw-a" style="font-size:12px;padding-top:3px;" ><span style="color:#888;font-size:12px;">支持图片、视频以及音频</span>
		                        <div class="progress" id="uploadFileProgress" style="display:none;">
		                          <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;min-width:20%;">
		                            0%
		                          </div>
		                        </div>
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-cus-100 control-label control-cus-label">播出说明：</label>
		                    <div class="col-cus-auto">
		                        <textarea v-model="explan" maxlength="140" placeholder="140字以内" rows="5" class="form-control form-cus-control f-mw-a"></textarea>
		                        <div class="l-tar cus-redFont f-mw-a" v-show="140-explan.length>=0">剩余{{ 140-explan.length }}字可填写</div>
		                         <div class="l-tar cus-redFont f-mw-a" v-show="140-explan.length<0">已超出140字符</div>
		                    </div>
		                </div>
		            </form>
		          </div>
		        </div>
		      </div>
		      <div class="modal-footer">
		        <button type="button" @click="done" class="btn btn-cus-size-b btn-cus-red">确定</button>
		      </div>
		    </div>
		  </div>
		</div>
		<div class="modal fade" id="myModal3" role="dialog" aria-labelledby="gridSystemModalLabel" data-desc="edit" data-backdrop="static">
		  <div class="modal-dialog modal-cus-dialog modal-dialog-fail" role="document">
		    <div class="modal-content" id="app3">
		      <div class="modal-header">
		        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <span class="modal-title">不通过</span>
		      </div>
		      <div class="modal-body">
		        <div class="container-fluid">
		          <div class="row">
		            <form class="form form-horizontal form-cus">
		            	<div class="form-group">
		            		<label class="col-cus-100 control-label control-cus-label"><span class="cus-redFont">*</span>素材：</label>
		            		<div class="col-cus-auto">
		            			<label class="radio-inline"><input type="radio" id="material01" checked="true" name="material" v-model="material" value="0" /> 通过 </label>
		            			<label class="radio-inline"><input type="radio" id="material02" name="material"  v-model="material" value="1" /> 不通过 </label>
		            		</div>
		            	</div>

		            	<div class="form-group">
		            		<label class="col-cus-100 control-label control-cus-label"><span class="cus-redFont">*</span>FM审核：</label>
		            		<div class="col-cus-auto">
		            			 <div class="reject-media" v-for="key in reject_media">
                                    <span>{{ key.mediaName }}</span>
                                    <label class="radio-inline">
                                        <input type="checkbox" name="rej-media" v-model="reMedia" value="{{ key.subPlanId }}" /> 审核不通过 
                                    </label>
                                  </div>
		            			<div style="display: none">{{ reMedia }}</div> 
		            		</div>
		            	</div>

		                <div class="form-group">
		                    <label class="col-cus-100 control-label control-cus-label"><span class="cus-redFont">*</span>不通过描述：</label>
		                    <div class="col-cus-auto">
		                        <textarea v-model="reson" maxlength="140" placeholder="为了提升您的品牌形象，请填写不超过140个字的不通过理由~" rows="5" class="form-control f-mw-a"></textarea>
		                        <div class="l-tar cus-redFont f-mw-a" v-show="140-reson.length>=0">剩余{{ 140-reson.length }}字可填写</div>
		                         <div class="l-tar cus-redFont f-mw-a" v-show="140-reson.length<0">已超出140字符</div>
		                    </div>
		                </div>
		            </form>
		          </div>
		        </div>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-cus-size-b btn-cus-white" data-dismiss="modal">取消</button>
		        <button type="button" @click="reject" class="btn btn-cus-size-b btn-cus-red">确定</button>
		      </div>
		    </div>
		  </div>
		</div>
		<div class="modal fade" id="myModal4" role="dialog" aria-labelledby="gridSystemModalLabel" data-desc="edit" data-backdrop="static">
		  <div class="modal-dialog modal-cus-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <span class="modal-title">竞投失败原由</span>
		      </div>
		      <div class="modal-body">
		        <div class="container-fluid">
		          <div class="row" id="app4">
		          <div class="col-xs-12 f-mt10 f-mb10">
		            {{ explanation }}
		          </div>
		          </div>
		        </div>
		      </div>
		    </div>
		  </div>
		</div>	


		<!-- checkTimes -->
		<div class="modal fade" id="myModal6" role="dialog" aria-labelledby="gridSystemModalLabel" data-desc="edit" data-backdrop="static">
		  <div class="modal-dialog modal-cus-dialog modal-dialog-fail" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <span class="modal-title">上传播出时段</span>
		      </div>
		      <div class="modal-body">
		        <div class="container-fluid">
		          <div class="row" id="app6">
		          <div class="col-xs-12 f-mb10 f-mt10">
		            <div class="panel panel-white panel-cus" >
		                <div class="panel-heading">
		                 	<p>媒体：{{ mediaName  }}</p>
		                 	<p>广告报价：{{ timelevel_name }}，{{ timelevel_price }}元/次</p>
		                 	<p>播出日期：{{ day_length  }}天</p>
		                 	<p>播出频次：{{ post_times }}次</p>
		                </div>

		                <div class="panel-body">
		            <table class="table m-checkTimes" id="j_table">
		                <thead>
		                    <tr>
		                        <td>日期</td>
		                        <td >时间段</td>
		                        <td style="border-left: 1px solid #CCC;">播出时间点位</td>
		                    </tr>
		                </thead>
		            	<tbody>
		            		<tr>
		            			<td>
		            				<ul class="checkTimes-date" >
		            					<li :class="$index==selday ? 'bg01' : ''" v-for="key in allPoints" @click="addBg($index)">{{ key.date }}</li>
		            				</ul>
		            			</td>
		            			<td style="border-left: 1px solid #CCC;">
		            				<ul class="checkTimes-points">
		            					<li v-for="item in allPoints[selday].times" :class="item.flag ? 'bg01' : ''" @click="addPoints(item)">{{ item.name }}</li>

		            				</ul>
		            				
		            			</td>
		            			<td style="border-left: 1px solid #CCC;">
		            				<ul class="sel_points">
		            					<li v-for="item in allPoints[selday].times" v-if="item.flag" @click="removePoints(item)" >{{ item.name }}</li>
		            				</ul>
		            			</td>
		            		</tr>

		            		<tr v-if="!allPoints.length">
		            			<td colspan="3">
		            				 暂无数据
		            			</td>
		            		</tr>
		            	</tbody>
		            </table>
		            </div>
		            </div>

		            <div class="modal-footer">
				        <button type="button" class="btn btn-cus-size-b btn-cus-white" data-dismiss="modal">取消</button>
				        <button type="button" @click="saveTime" class="btn btn-cus-size-b btn-cus-red">确定</button>
				    </div>

		          </div>
		          <div class="col-xs-12 f-mb10" id="j_player" style="display:none;">
		          	<img src="${ctx}/rs/images/player.png" />
		          </div>
		          </div>
		        </div>
		      </div>
		    </div>
		  </div>
		</div>

	
	</div>
</div>
</div>



<!-- 查看上传时段 -->
<div class="modal fade" id="myModal7" role="dialog" aria-labelledby="gridSystemModalLabel" data-desc="edit" data-backdrop="static">
  <div class="modal-dialog modal-cus-dialog" role="document" id="app7">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <span class="modal-title">查看播出时段</span>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
          <div class="col-xs-12 f-mb10 f-mt10">
            <div class="panel panel-white panel-cus" >
                <div class="panel-heading">投放日期内每天本频率安排的广告播出时间点位</div>
                <div class="panel-body">
            <table class="table m-checkTimes" id="j_table">
                <thead>
                    <tr>
                        <td>投放日期</td>
                        <td style="border-left: 1px solid #CCC;">播出时间点位</td>
                    </tr>
                </thead>
            	<tbody>
            		<tr>
            			<td >
            				<ul>
            					<li :class="$index==selday ? 'current' : ''" v-for="key in medias" @click="tabDay($index)">{{ key.post_date }}</li>
                      <li v-if="!medias.length">暂无数据</li>
            				</ul>
            			</td>
            			<td style="border-left: 1px solid #cccccc;">
            				<ol class="current">
            					<li v-for="item in medias[selday].showtime_info">{{ item.showtime }}<!-- <button type="button" class="btn btn-default btn-xs">监播</button> --></li>
                     			<li v-if="!medias[selday].showtime_info">暂无数据</li>
            				</ol>
            				
            			</td>
            		</tr>
            	</tbody>
            </table>
            </div>
            </div>
          </div>
          <div class="col-xs-12 f-mb10" id="j_player" style="display:none;">
          	<img src="${ctx}/rs/images/player.png" />
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<div class="modal fade" id="myModal8" role="dialog" aria-labelledby="gridSystemModalLabel" data-desc="edit" data-backdrop="static">
  <div class="modal-dialog modal-cus-dialog" style="width:322px;" role="document">
    <div class="modal-content" style="border-width: 1px;">
      <div class="modal-header">
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <span class="modal-title">选择投放日期</span>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row" style="margin-left: -15px;margin-right: -15px;">
          <div class="col-xs-12 f-mt10 f-mb10">
            <div id="datePiker">
              <table class="p-datePiker">
                <thead>
                  <tr>
                    <th class="dpPrev dpBtn">&lt;</th>
                    <th colspan="5" class="dpMonth">2016-06</th>
                    <th class="dpNext dpBtn">&gt;</th>
                  </tr>
                  <tr>
                    <th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
            <button type="button" class="btn text-white close-confirm" data-dismiss="modal" aria-label="Close">确定</button>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<!-- 引入所有joli的脚本 -->
<jsp:include page="../joli/scripts.jsp"></jsp:include>
<!-- 引入页面需要的脚本 -->
<script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
<script src="${ctx}/rs/js/jquery.formatDate.js"></script>
<script src="${ctx}/rs/js/my97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}/rs/js/session-out-error.js"></script>
<script src="${ctx}/rs/js/jquery.validate.min.js"></script>
<script src="${ctx}/rs/js/jquery.form.js" type="text/javascript"></script>
<script src="${ctx}/rs/js/messages_zh.min.js"></script>

<script src="${ctx}/rs/js/jqPaginator.js"></script>
<script type="text/javascript" src="${ctx}/rs/js/lib/vue.min.js"></script>
<script type="text/javascript" src="${ctx}/rs/js/webconfig2.js"></script>
<script src="${ctx}/rs/js/lib/jquery.noty.packaged.min.js"></script>
<script src="${ctx}/rs/js/lib/relax.js"></script>
<script type="text/javascript">    
    !(function(wd,dm){
      if(!wd.YDdatePiker){
        wd.YDdatePiker = {
          mode:'enable',
          checkDays:'',
          config: {
            currentMonth:'',            
            st:0,
            et:0,
            disDays:0
          },
          setMon: function(val){
            this.config.currentMonth = val;
            $("#datePiker table.p-datePiker>thead th.dpMonth").text(val);
            this._rend();
          },
          getMon: function(){
            return this.config.currentMonth
          },
          _check:function(){
            this.config.check.apply(this,arguments);
          },
          show: function(config){
            this.config.st = config.starttime || '1970/01/01';
            this.config.et = config.endtime || '9999/12/12';

            this.config.prev = config.prev;
            this.config.next = config.next;
            this.config.check = config.check;

            this.config.disDays = config.disDays || '';
            this.config.checkDays = config.checkDays?config.checkDays.split(','):[];

            this.disAll = config.disAll || false;

            var st,et='';
            if(this.config.st){
              this.config.st = st = new Date(this.config.st.replace(/-/g,'/')+' 00:00:00');
            }
            if(this.config.et){
              this.config.et = et = new Date(this.config.et.replace(/-/g,'/')+' 23:59:59');
            }
            if(!config.currentDate){
              var t = st || et;
              var m = t.getMonth()+1;
              m = m<10?'0'+m:m;
              this.setMon(t.getFullYear()+'/'+m);
            }else{
              this.setMon(config.currentDate.slice(0,7).replace(/-/g,'/'));
            }

          },
          _next: function(){
            var date = this.config.currentMonth;
            var d = date.split('/');
            if(d[1]*1+1==13){
              d[0] =d[0]*1 + 1;
              d[1] = '01';
            }else{
              d[1] = d[1]*1+1;
              d[1] = d[1]<10?'0'+d[1]:d[1];
            }
            this.config.next(d[0]+'/'+d[1]);
          },
          _prev: function(){
            var date = this.config.currentMonth;
            var d = date.split('/');
            if(d[1]-1==0){
              d[0] -= 1;
              d[1] = '12';
            }else{
              d[1] -= 1;
              d[1] = d[1]<10?'0'+d[1]:d[1];
            }
            this.config.prev(d[0]+'/'+d[1]);
          },
          _rend: function(){            
            var html = createHTML(this.config);
            $("#datePiker table.p-datePiker>tbody").html(html);
            this._init();
          },
          _init: function(){
            var that = this;
            if(arguments.callee.count){
              return;
            }
            arguments.callee.count = 1;
            $("#datePiker table.p-datePiker>tbody").on('click',function(e){
            	if(that.disAll){
            		return;
            	}
              var day = $(e.target).attr('data-day');
              if($(e.target).hasClass('disabled')){
                return;
              }else if($(e.target).hasClass('selected')){
                $(e.target).removeClass('selected').addClass('selectable');
                that.config.checkDays.splice(that.config.checkDays.indexOf(day),1);
              }else{
                $(e.target).removeClass('selectable').addClass('selected');
                that.config.checkDays.push(day)
              }
              that._check(day,that.config.checkDays,e.target);
            });
            $("#datePiker table.p-datePiker>thead").on('click',function(e){
              if($(e.target).hasClass('dpPrev')){
                that._prev();
              }else if($(e.target).hasClass('dpNext')){
                that._next();
              }
            });
          }
        } 
      }

      function createHTML(config){      

        var t0 = config.currentMonth+'/'+'01';
        var dt = new Date(t0);

        var y = dt.getFullYear();
        var mm = dt.getMonth();
        var m = dt.getMonth()+1;
        m = m<10?'0'+m:m;

        //get week info of first day return 0~6
        var week = dt.getDay();
        

        var i=0;
        var j=1;
        var html='';
        while(i<6){
          html += '<tr>';
          if(!i && week){
            for(var w = 7;w--;){
              if(7-week<=w){
                html += '<td></td>';
              }else{
                html += '<td data-day="'+dateCreater(j)+'" class="'+classCreater(j)+'">'+j+'</td>';
                j++;
              }
            }

          }else{
            for(var v = 7;v--;){
              if(j>=29){
                if((new Date(y+'/'+m+'/'+j)).getMonth()!=mm){
                  j = '';
                }
              }
              html += '<td data-day="'+dateCreater(j)+'" class="'+classCreater(j)+'">'+j+'</td>';
              if(j){
                j++;
              }
            }
          }
          html += '</tr>'
          i++;
          if(!j){
            break;
          }
        }

        return html;


        function classCreater(num){
          var classAry = ['disabled','selected','selectable'];
          if(num===''){
            return classAry[0];
          }

          num = num<10?'0'+num:num;

          var d = y+'/'+m+'/'+num;
          if(config.disDays.indexOf(d)>-1){
            return classAry[0];
          }
          var day = new Date(d+' 00:00:00');
          var st = config.st;
          var et = config.et;
          if(Date.parse(st)>Date.parse(day) || Date.parse(et)<Date.parse(day)){
            return classAry[0];
          }
          if(config.checkDays.indexOf(d)>-1){
            return classAry[1];
          }
          return classAry[2];

        }

        function dateCreater(num){
          num = num<10?'0'+num:num;
          return y+'/'+m+'/'+num;
        }

      }
      //$("#datePiker").hide();
    })(window,document);
</script>
<script src="${ctx}/rs/js/media/fm/adlist2.js?v=1.2.0"></script>
<!--[if lte IE 9]>
<script src="${ctx}/rs/js/lib/jquery.xdomainrequest.min.js"></script>
<![endif]-->
<script type="text/javascript">
activeMenu($("#menu_fmgggl_0"));
//初始化音频对象
window.audioPlayer = new Audio();
//绑定播放事件
window.audioPlayer.addEventListener("playing",function(){
    $("#playerBtn").addClass("glyphicon-pause").removeClass("glyphicon-play");
},false);
//绑定暂停事件
window.audioPlayer.addEventListener("pause",function(){    
    $("#playerBtn").addClass("glyphicon-play").removeClass("glyphicon-pause");
},false);
window.audioPlayer.addEventListener("loadedmetadata",function(){
    for(var i in audioPlayer){
       // console.log(i,audioPlayer[i]);
    }
});


//绑定进度更新事件
window.audioPlayer.addEventListener("timeupdate",function(){
    var c = window.audioPlayer.currentTime*1;
    var d = window.audioPlayer.duration*1;
    //console.log(window.audioPlayer,c,d);
    if(isNaN(d) || d===Infinity){
        $("#playerTime").text(timeFormate(c)+'/未知');
        $("#processBar").width('100%');
        return;
    }
    $("#playerTime").text(timeFormate(c)+'/'+timeFormate(d));
    $("#processBar").width(c/d*100+'%');
},false);
//绑定播放、暂停按钮对音频对象的操作
$("#playerBtn").on("click",function(){
    if($(this).hasClass("glyphicon-play")){
        audioPlayer.play();
    }else{
        audioPlayer.pause();
    }
});
//模态框事件监听
// $('#myModal').on('hidden.bs.modal', function (e) {
//     console.log("dispear!");
//     window.audioPlayer.pause();
// });
// //模态框事件监听
// $('#myModal').on('shown.bs.modal', function (e) {
//     console.log("show!");
// });
// 
$("#modalCloseBtn").on("click",function(){
    window.audioPlayer.pause();
});



//将秒转换为时间
function timeFormate(t){
    var s = Math.floor(t%60);
    var m = Math.floor(t/60);
    var h='';
    if(m>=60){
        h = Math.floor(m/60);
        m = m%60;
    }
    var str = '';
    if(h){
        str += (h<10?'0'+h:h)+':';
    }
    str += (m<10?'0'+m:m)+':';
    str += s<10?'0'+s:s;
    return str;
}
</script>
</body>
</html>